<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom练习</title>
</head>
<body>
    <div id="container"><span id='myspan'>loading...</span></div>
    <ul>
        <li>test1</li>
     <!--    <li id="targetLi">test2</li> -->
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
        <li>test6</li>
        <li>test7</li>
        <li>test8</li>
        <li>test9</li>
        <li>test9</li>
        <li>test9</li>
        <li>test9</li>
        <li>test9</li>
        <li>test9</li>
        <li>test9</li>
        <li>test9</li>
        <li>test9</li>
        <li>test9</li>
        <li>test9</li>
        <li>test9</li> 
    </ul>
    <script>
    //删除loading方法
    //1.myspan.parentNode.removeChild(myspan);
    //2.myspan.removeChild(myspan.childNodes[0]);
    //3.container.innerHTML='';(不推荐)
    //4.container.removeChild(myspan);
 ////////////////////////////////////////////////////////////////////////
    // 新增子元素
    // var ul = document.getElementsByTagName('ul');
    // console.log(ul.childNodes);
    // var targetLi=document.getElementById('targetLi')
    // var ul = document.getElementsByTagName('ul')[0];
    // var newLi = document.createElement('li');
    // var newLiTex = document.createTextNode('new li');
    // newLi.appendChild(newLiTex);
    // ul.replaceChild(newLi,targetLi);
    // ul.appendChild(newLi);
 ////////////////////////////////////////////////////////////////////////
    //给li变色
    // var li= document.getElementById('li1');
    // li1.style.color="yellow";
    // var li = document.getElementById('li2');
    // li2.style.color='red';
    //  var li = document.getElementById('li3');
    // li3.style.color='green';
    //  var li = document.getElementById('li4');
    // li4.style.color='blue';
////////////////////////////////////////////////////////////
//函数有序给li变色
//     var ul = document.getElementsByTagName('ul')[0];
//     var rendercolor = function(target){
//     var list = target.getElementsByTagName('li');
//     var colors = ['red','green','yellow'];
//     for(var i=0;i<list.length;i++){
//        list[i].style.color=colors[i];
//     }
// };
//     rendercolor(ul)
///////////////////////////////////////////////////////
//随机数li变色
  // var ul = document.getElementsByTagName('ul')[0];
  // var rendercolor = function(target) {
  // var li = target.getElementsByTagName('li');
  // var colors =['red','green','yellow','blue'];
  // var len = li.length;
  // var index;
  // for(var i=0;i<len;i++){
  //   index = Math.floor(Math.random()*4);
  //   li[i].style.color = colors[index]
  // }
  // };
  // rendercolor(ul)
   
    </script>
</body>
</html>